import React, { Component } from 'react';
// import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from '../actions/index';
import { modifyCr, getSummaryLogs, getBuilds } from '../../../actions';
import { enterPage } from 'utils/track';
import { getFeature } from 'utils/features';
import {
  changeMrTabKey,
  getMergeRequest,
} from 'pages/index/pages/project/pages/projectMergeRequestDetail/actions';
import MrRequestInfo from 'pages/index/pages/project/pages/projectMergeRequestDetail/containers/components/mergeRequsetInfo';
import BasicInfo from 'pages/index/pages/project/pages/projectMergeRequestDetail/containers/components/basicInfo';
import PipeGuide from 'pages/index/pages/project/pages/projectMergeRequestDetail/containers/components/pipeGuide';
import Logs from 'pages/index/pages/project/pages/projectMergeRequestDetail/containers/components/logs';
import {
  postDrafts,
  postInlineComments,
  toggleComment,
} from 'pages/index/pages/project/pages/projectMergeRequestDetail/pages/changes/actions';

class Root extends Component {
  componentDidMount() {
    // 设置MR tabkey
    this.props.changeMrTabKey && this.props.changeMrTabKey('/');

    const { codeReviewDetail } = this.props;
    enterPage('Repo-MR', {
      sendPerf: false,
      mr_id: codeReviewDetail.id,
    });
  }

  render() {
    const { codeReviewDetail, sourceBranchExist, targetBranchExist, projectInfo } = this.props;

    const { state } = codeReviewDetail;

    return (
      <div className="mr-overview-wrapper">
        <div className="mr-overview-left">
          {/* 附加信息 */}
          {sourceBranchExist !== 'false' &&
            targetBranchExist !== 'false' &&
            state !== 'closed' &&
            state !== 'merged' && (
              <React.Fragment>
                <MrRequestInfo {...this.props} />
              </React.Fragment>
            )}

          {/* 动态 */}

          {getFeature('module_enable.repository.flow') && <PipeGuide {...this.props} projectInfo={projectInfo} />}
          <Logs {...this.props} projectInfo={projectInfo} />
        </div>
        {/* 右侧属性 */}
        <div className="mr-overview-right">
          <BasicInfo {...this.props} />
        </div>
      </div>
    );
  }
}

export default connect(
  (state) => {
    const { root, overviewReducer, changesReducer } = state.project.projectMergeRequestDetail;
    return {
      ...root,
      ...overviewReducer,
      changesReducer,
      projectInfo: state.project.root.projectInfo,
    };
  },
  (dispatch) =>
    bindActionCreators(
      {
        ...actions,
        modifyCr,
        getSummaryLogs,
        getBuilds,
        changeMrTabKey,
        getMergeRequest,
        postDrafts,
        postInlineComments,
        toggleComment,
      },
      dispatch,
    ),
)(Root);
